<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性_文本水平对齐和单行文本垂直居中</title>
    <style>
        .box1{
            text-align: center;
            background-color: aquamarine;
        }
        .box2{
            background-color: yellowgreen;
            width: 500px;
            /* 两端对齐 */
            text-align: justify;
        }
        .box3{
            height: 50px;
            width: 500px;
            background-color: chartreuse;
            /* 垂直居中 */
            line-height: 50px;
        }
        .box4{
            height: 100px;
            width: 500px;
            background-color: rgb(236, 10, 168);
            /* 垂直居中 */
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div class="box1">hello 大家好 text-align</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore obcaecati recusandae illum vero repellat quo ab ea quis eum quidem cupiditate corporis consectetur, placeat, aliquam, atque debitis cum doloribus voluptatem?</div>
    <div class="box3">大家好</div>
    <div class="box4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt repellendus ipsum ea delectus voluptatem, quo, eum velit beatae nisi minima iure totam, dolorem illo? Eius porro animi sequi sint id.</div>
</body>
</html>